import React, { Component } from 'react';
import '../../styles/TicketHolder.scss'
import * as service from '../../api/index'
import { Swiper } from 'antd-mobile'

class TicketHolder extends Component {
    state = {
        ticketdetails: []
    }
    async componentDidMount() {
        let res = await service.ticketdetails()
        console.log(res.data.list);
        this.setState({ ticketdetails: res.data.list })
    }

    render() {
        return (
            <div className='ticketholder'>
                <div className="title">
                    票夹
                </div>

                <Swiper style={{
              '--track-padding': ' 0 0 16px',
            }}>
                    {
                        this.state.ticketdetails.map((item, index) => {
                            return (
                                <Swiper.Item key={index}>
                                    <div className="ticketdetails">
                                        <div className="name">
                                            {item.name}
                                        </div>
                                        <div className="starttime">
                                            {item.starttime}
                                        </div>
                                        <div className="ticket">
                                            <img src={item.pic} alt="" />
                                            <div className="ticket_id">
                                                {item.ticket_id}
                                            </div>
                                        </div>
                                        <div className="tip">
                                            请至自助取票机处扫描二维码或输入券码领取纸质票入场
                                        </div>
                                    </div>
                                </Swiper.Item>
                            )
                        })
                    }
                </Swiper>
                {/* {
                        this.state.ticketdetails.map(item => {
                            return (
                                <div className="item">
                                    <div className="name">
                                        {item.name}
                                    </div>
                                    <div className="starttime">
                                        {item.starttime}
                                    </div>
                                    <img src={item.pic} alt="" />
                                    <div className="ticket_id">
                                        {item.ticket_id}
                                    </div>
                                    <div className="tip">
                                        请至自助取票机处扫描二维码或输入券码领取纸质票入场
                                    </div>
                                </div>
                            )
                        })
                    } */}

            </div>
        );
    }
}

export default TicketHolder;